<template>
  <panel class="su-container">
    <banner class="dashboard-text">
      <span slot="title">
        行业分类
        <span style="margin-left:5px;color:#333;">/ 添加行业</span>
      </span>
      <el-button class="btn-gradient" type="primary" icon="el-icon-refresh">刷新</el-button>
    </banner>
    <div class="su_con">
      <!-- 查看本级 -->
      <el-form v-if="isNew === '3'" ref="viewForm" :model="viewForm" label-width="214">
        <el-form-item label="分类名称111:">
          <el-input v-model="viewForm.tradeName" placeholder="请输入名称:" disabled />
        </el-form-item>
        <el-form-item label="上级分类:">
          <el-select v-model="viewForm.parentId" placeholder="请选择分类" disabled>
            <el-option label="请选择分类" value />
            <el-option v-for="item in tradeoptions" :key="item.id" :label="item.tradeName" :value="item.tradeCode" />
          </el-select>
        </el-form-item>
        <p>不选择分类默认为顶级分类</p>
        <div class="xianshi">
          <el-form-item label="是否显示:">
            <el-radio-group v-model="viewForm.viewState" disabled>
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="xianshi">
          <el-form-item label="是否显示在浏览栏:">
            <el-radio-group v-model="viewForm.searchState" disabled>
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="活动形式:">
          <el-input v-model="viewForm.remarks" type="textarea" placeholder="请输入内容" disabled />
        </el-form-item>
      </el-form>
      <!-- 新增下级 -->
      <el-form v-if="isNew === '2'" ref="parentIdform" :rules="rulesform" :model="parentIdform" label-width="214">l
        <el-form-item label="分类名称:" prop="tradeName">
          <el-input v-model="parentIdform.tradeName" placeholder="请输入名称:" />
        </el-form-item>
        <el-form-item label="上级分类:">
          <el-select v-model="parentIdform.parentId" placeholder="请选择分类" disabled>
            <el-option label="请选择分类" value />
            <el-option v-for="item in tradeoptions" :key="item.id" :label="item.tradeName" :value="item.tradeCode" />
          </el-select>
        </el-form-item>
        <p>不选择分类默认为顶级分类</p>
        <div class="xianshi">
          <el-form-item label="是否显示:">
            <el-radio-group v-model="parentIdform.viewState">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="xianshi">
          <el-form-item label="是否显示在浏览栏:">
            <el-radio-group v-model="parentIdform.searchState">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="活动形式:">
          <el-input v-model="parentIdform.remarks" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <!-- 编辑,添加 -->
      <el-form v-if="isNew === '1'" ref="form" :model="form" :rules="rulesform" label-width="214">
        <el-form-item label="分类名称:" prop="tradeName">
          <el-input v-model="form.tradeName" placeholder="请输入名称:" />
        </el-form-item>
        <div class="xianshi">
          <el-form-item label="是否显示:">
            <el-radio-group v-model="form.viewState">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="xianshi">
          <el-form-item label="是否显示在浏览栏:">
            <el-radio-group v-model="form.searchState">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="活动形式:">
          <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
    </div>
    <div class="foot">
      <el-button v-if="isNew === '3'" type="primary" @click="onSubmit3">确认</el-button>
      <el-button v-if="isNew === '2'" type="primary" @click="onSubmit2">提交1</el-button>
      <el-button v-if="isNew === '1'" type="primary" @click="onSubmit">提交</el-button>
    </div>
  </panel>
</template>
<script>
import { sendIndustry, lookIndustry, getIndustry, getTradeInfo, updateTradeInfo, saveTradeInfo } from '@/api/usermanage'
import { setTimeout } from 'timers'
export default {
  data() {
    return {
      form: {
        tradeName: '',
        parentId: '',
        parentName: '',
        tradeLevel: '',
        searchState: '',
        viewState: '',
        tradeSort: '',
        remarks: ''
      },
      parentIdform: {
        tradeName: '',
        parentId: '',
        parentName: '',
        tradeLevel: '',
        searchState: '',
        viewState: '',
        tradeSort: '',
        remarks: '',
        tradeCode: ''
      },
      viewForm: {
        parentId: '',
        remarks: '',
        viewState: '',
        parentName: '',
        searchState: '',
      },
      radio2: 3,
      classvalue: '',
      tradeoptions: [],
      rulesform: {
        tradeName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ],
      },
      isNew: '1'
    }
  },
  created() {
    // this.gettrade();
    this.form.parentId = this.classvalue = this.$route.query.parentId || ''
    if (this.isAdd) {
      if (this.form.parentId) {
        this.isAddChild = true
      }
      if (this.$route.query.tradeCode) {
        this.isEdit = true
      }
    }
    if (this.$route.query.parentId & this.$route.query.tradeCode) {
      this.isNew = '3'
      this.getInfo3(this.$route.query.parentId, this.$route.query.tradeCode)
    } else if (this.$route.query.tradeCode) {
      this.getInfo(this.$route.query.tradeCode)
    } else if (this.form.parentId) {
      this.isNew = '2'
      this.getInfo2(this.form.parentId)
    }
  },
  methods: {
    // 新建保存
    onSubmit3() {
      const _this = this
      setTimeout(() => {
          _this.$router.push('user-industry')
        }, 800)
    },
    onSubmit() {
      if (!this.form.tradeName.trim()) {
        this.$message({
          type: 'error',
          message: '请将必填项输入完整！'
        })
        return
      }
      const {
        tradeName,
        parentId,
        searchState,
        viewState,
        remarks,
        tradeCode
      } = this.form
      // 判断新建还是编辑
      if (this.$route.query.tradeCode) {
        this.updateInfo({
          tradeName,
          parentId,
          searchState,
          viewState,
          remarks,
          tradeCode
        })
      } else {
        this.createInfo({
          tradeName,
          parentId,
          searchState,
          viewState,
          remarks
        })
      }
    },
    // 新建二级保存
    onSubmit2() {
      if (!this.parentIdform.tradeName.trim()) {
        this.$message({
          type: 'error',
          message: '请将必填项输入完整！'
        })
        return
      }
      if (this.$route.query.parentId) {
        this.updateInfo2()
      }
    },
    // 编辑提交
    updateInfo(obj) {
      updateTradeInfo(obj).then(res => {
        this.$message('更新分类成功')
        const _this = this
        setTimeout(() => {
          _this.$router.push('user-industry')
        }, 800)
      })
    },
    // 新增下级
    updateInfo2() {
      saveTradeInfo({
        parentId: this.parentIdform.tradeCode,
        remarks: this.parentIdform.remarks,
        searchState: this.parentIdform.searchState,
        tradeLevel: '2',
        tradeName: this.parentIdform.tradeName,
        viewState: this.parentIdform.viewState
      }).then(res => {
        this.$message('更新分类成功')
        const _this = this
        setTimeout(() => {
          _this.$router.push('user-industry')
        }, 800)
      })
    },
    // 新建提交
    createInfo(obj) {
      sendIndustry(obj).then(res => {
        this.$message('新增分类成功')
        const _this = this
        setTimeout(() => {
          _this.$router.push('user-industry')
        }, 800)
      })
    },
    // 查询分类数据
    gettrade() {
      getIndustry({
        pageNum: 1,
        pageSize: 10,
        tradeLevel: 1
      }).then(res => {
        this.tradeoptions = res.data.list.map(item => item)
        console.log('this.tradeoptions :', this.tradeoptions)
        this.trade = this.tradeoptions.filter(item => {
          return item.tradeName != null
        })
      })
    },
    // 获取详情
    getInfo(tradeCode) {
      getTradeInfo({
        tradeCode
      }).then(res => {
        this.setFromLast(res.data)
      })
    },
    getInfo2(parentId) {
      getTradeInfo({
        tradeCode: parentId
      }).then(res => {
        this.setFromLast2(res.data)
      })
    },
    getInfo3(parentId, tradeCode) {
      getTradeInfo({
        tradeCode: parentId
      }).then(res => {
        console.log(res.data.tradeName, 23132)
        this.viewForm.parentId = res.data.tradeName
      })
      getTradeInfo({
        tradeCode
      }).then(res => {
        console.log(res, 'qqqqqqqqqqq')
        this.viewForm.tradeName = res.data.tradeName
        this.viewForm.remarks = res.data.remarks
        this.viewForm.searchState = res.data.searchState
        this.viewForm.viewState = res.data.viewState
      })
    },
    setFromLast2(data) {
      console.log(data)
      this.parentIdform.parentId = data.tradeName
      this.parentIdform.tradeCode = data.tradeCode
    },
    setFromLast(data) {
      this.form = Object.assign({}, this.form, data)
    }
  }
}
</script>
<style lang="scss">
.su-container {
  padding-top: 0 !important;
  margin: 0;

  .dashboard-text {
    margin-top: 17px;
    width: 100%;
    overflow: auto;
    height: 37px;

    .lef {
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      i {
        display: inline-block;
        width: 11px;
        height: 20px;
        background: #488dff;
        border-radius: 4px;
        margin-right: 12px;
      }
    }

    .rig {
      font-size: 14px;
      width: 76px;
      height: 37px;
      text-align: center;
      line-height: 37px;
      background: #488dff;
      border-radius: 4px;
      line-height: 37px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      cursor: pointer;
    }
  }

  // form
  .su_con {
    padding: 45px 0 61px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

    .el-form {
      position: relative;

      .el-form-item {
        margin-bottom: 25px;

        .el-textarea__inner {
          width: 444px !important;
          height: 211px !important;
          border-radius: 3px !important;
          outline: none !important;
          border: 1px solid #dcdfe6 !important;
        }

        .el-form-item__label {
          float: left !important;
          width: 214px !important;
          padding: 0 !important;
          height: 36px !important;
          line-height: 36px !important;
          font-size: 16px !important;
          font-family: PingFangSC-Regular !important;
          font-weight: 400 !important;
          color: rgba(102, 102, 96, 1) !important;
        }

        .el-form-item__content {
          width: 444px !important;
          min-height: 36px !important;
          line-height: 36px !important;
          float: left !important;
          margin-left: 8px !important;

          .el-input__inner {
            height: 36px !important;
            line-height: 36px !important;
          }
        }
      }

      p {
        margin: -9px 0 25px 223px;
        width: 200px;
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
      }

      .xianshi {
        .el-form-item {
          height: 24px !important;
          line-height: 24px !important;

          .el-form-item__label {
            float: left !important;
            width: 214px !important;
            padding: 0 !important;
            height: 24px !important;
            line-height: 24px !important;
            font-size: 16px !important;
            font-family: PingFangSC-Regular !important;
            font-weight: 400 !important;
            color: rgba(102, 102, 96, 1) !important;
          }

          .el-form-item__content {
            height: 24px !important;
            line-height: 24px !important;
          }
        }
      }
    }
  }
  //   按钮
  .foot {
    padding: 20px;
    margin-bottom: 40px;
    text-align: center;

    .el-button--primary {
      width: 100px !important;
      height: 40px !important;
      background: rgba(72, 141, 255, 1) !important;
      border-radius: 2px !important;
    }
  }
}
</style>
